<template>
  <div id="operate-comment">
    <el-container style="overflow-x:hidden;overflow-y:hidden; height:100%;">
      <el-scrollbar
        style="width:100%;height:100%;white-space: nowrap;"
        @mousewheel.native="wheel"
        ref="roleRoll"
        class="roleRoll"
      >
        <el-header>
          <!-- 查询开始 -->
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            style="margin-top:20px"
          >
            <el-form-item>
              <el-input v-model.trim="formInline.id" placeholder="输入评论ID"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="formInline.userName" placeholder="输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="formInline.spuName" placeholder="输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="formInline.content" placeholder="输入评论内容"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit()"
                icon="el-icon-search"
                clearable
                v-permission="'operation:appraise:query'"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 查询结束 -->
        </el-header>

        <el-main>
          <el-table
            :data="tableData"
            style="width: 100%;"
            :default-sort="{ prop: 'date', order: 'descending' }"
            align="center border show-summary"
            border
          >
            <!-- 列表数据 -->
            <el-table-column prop="id" label="评论编号">
            </el-table-column>
            <el-table-column prop="content" label="评论内容" width="300">
            </el-table-column>
            <el-table-column prop="score" label="评论分数">
            </el-table-column>
            <el-table-column prop="userId" label="用户ID"> </el-table-column>
            <el-table-column prop="userNickName" label="用户昵称">
            </el-table-column>
            <el-table-column prop="orderId" label="订单ID"> </el-table-column>
            <el-table-column prop="spuId" label="商品ID"> </el-table-column>
            <el-table-column prop="spuTitle" label="商品名称">
            </el-table-column>
            <el-table-column label="评论时间">
              <template slot-scope="scope">{{
                scope.row.gmtCreate | formatDate
              }}</template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  v-permission="'operation:appraise:delete'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <!-- 底部页数 -->
          <paging :paging="paging" :onSubmit="onSubmit"></paging>
        </el-footer>
      </el-scrollbar>
      <!-- 滚动组件结束 -->
    </el-container>
    <!-- 主要内容结束 -->
  </div>
</template>

<script>
import comment from "@/api/comment";
import Paging from "../../components/Paging";
import TimeDate from "@/util/TimeDate";
export default {
  components: {
    Paging,
  },
  data() {
    return {
      formInline: {//查询数据
        userName: "", //用户姓名
        id: "", //评论id
        spuName: "", //商品名字
        orderId: "", //订单ID
        score: "", //评论分数
        content: "", //评论内容
      },
      tableData: [], //后台全部列表数据
      paging: {
        currentPage: 1, //出现的页数
        pagesize: 10, //    每页的数据
        total: 0, //总条数
      },
    };
  },
  created: function() {
    //一开始的渲染数据
    this.onSubmit();
  },
  filters: {
    //过滤
    formatDate: function(value) {
      //转换时间戳
      if (value!=undefined) {
        let data1 =new Date()
        let time=0
        time = data1.getTime()-value
        if (Math.round(time/(60*60*1000))<24) {
           return Math.round(time/(60*60*1000))+"小时前" 
        }else{
          return  TimeDate.format(new Date(value), "MM月dd日hh时mm分"); 
        }
      }else{
         return  TimeDate.format(new Date(value), "MM月dd日hh时mm分"); 
      }
       
    },
  },
  methods: {
    onSubmit() {
      //查询
      let that = this;
       let data = Object.assign({pageNo:that.paging.currentPage,limit:that.paging.pagesize}, that.formInline);
      console.log(data)
      comment
        .commentInquire(data)//查询接口封装
        .then((res) => {
          console.log(res);
          that.tableData = res.data.data.items; //获取数据赋值
          that.paging.total = res.data.data.total; //总条数
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getTreeData(data) {
      //递归方法
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          //children是数据库中的变量名
          data[i].children = undefined;
        } else {
          this.getTreeData(data[i].children); //返回元素的子元素的集合有数据继续导出
        }
      }
      return data;
    },
    handleDelete(index, row) {
      //删除
      console.log(index, row.spuTitle);
      let that = this;
      this.$confirm(
        "此操作将永久删除--评论" + row.id + "--, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          comment
            .deleteAppraise({
              //删除封装接口
              id: row.id,
            })
            .then(function(res) {
              if (res.data.errmsg == "成功") {
                that.$message({
                  type: "success",
                  message: res.data.errmsg,
                });
                that.paging.total = that.paging.total - 1; //总共条数-1条
                that.tableData.splice(index, 1);
              } else {
                that.$message({
                  showClose: true,
                  message: res.data.errmsg,
                  type: "error",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    wheel(e) {
      //滚动事件
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta < 0) {
          //控制滚动的方向
          //向下
          this.$refs.roleRoll.wrap.scrollTop += 20;
        } else {
          this.$refs.roleRoll.wrap.scrollTop -= 20;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#operate-comment {
  //内容填满
  height: 100%;
}
.el-header {
  height: auto!important;
}
.el-main {
  line-height: 0px !important;
}
.concer-input {
  //查询文本框
  width: 25%;
  margin-right: 10px;
}
.demo-form-inline{
  margin-top:20px;
  display: flex;
  flex-wrap: wrap;
}
.demo-form-inline>div{
  height: 45px;
  margin-bottom: 0px!important;
}

</style>

<style>
.el-dialog__header,
.dialog-footer,
.el-tree-node__label,
.el-dialog__footer,
.el-checkbox,
.custom-tree-node {
  /*对话框的行高*/
  line-height: 0px;
}
.cell {
  /*列表居中*/
  text-align: center;
}
::-webkit-scrollbar {
  /*对话框的隐藏滚动条但是可以滚动，滚动条的宽度*/
  width: 0px !important;
}
</style>
